<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <div ref="box" style="height: 400px; width: 750px"></div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { getreportsApi } from '@/api/reports'
import * as echarts from 'echarts'
export default {
  name: '',
  data () {
    return {
      list1: [],
      list2: [],
      list3: [],
      list4: []
    }
  },
  created () {
    // this.init()
  },
  computed: {
  },
  methods: {
    async init () {
      const res = await getreportsApi()
      if (res.meta.msg === '获取报表成功') {
        this.list1 = res.data.legend.data
        this.list2 = res.data.series
        this.list3 = res.data.xAxis[0].data
        this.list4 = res.data.yAxis
        const myChart = echarts.init(this.$refs.box)
        myChart.setOption({
          title: {
            text: '用户来源'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          color: ["#d5726f", "#6e7d88", "#91bdc3", "#e1a894", "#b2d8c7",],
          legend: {
            data: this.list1
          },

          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.list3,
            }
          ],
          yAxis: this.list4,
          series: this.list2
        })
      }
    }
  },
  mounted () {
    this.init()
  },

}
</script>
<style lang='scss'  scoped>
</style>
